<template>
  <el-dialog
    title="设置显示字段"
    :visible.sync="visible"
    :before-close="handleClose"
    width="40%"
    class="sfBox"
  >
    <div>
      基础字段 (默认)
      &nbsp;&nbsp;&nbsp;头像&nbsp;&nbsp;&nbsp;昵称/姓名&nbsp;&nbsp;&nbsp;手机号&nbsp;&nbsp;&nbsp;成为客户时间
    </div>
    <div>
      可选字段
    </div>
    <div>
      交易信息字段
    </div>
    <el-checkbox-group v-model="checkListA">
      <el-checkbox :label="1">最近消费时间</el-checkbox>
      <el-checkbox :label="2">消费金额</el-checkbox>
      <el-checkbox :label="3">消费次数</el-checkbox>
      <el-checkbox :label="4">充值金额</el-checkbox>
      <el-checkbox :label="5">充值次数</el-checkbox>
    </el-checkbox-group>
    <div>
      账户资产
    </div>
    <el-checkbox-group v-model="checkListB">
      <el-checkbox :label="1">当前积分</el-checkbox>
      <el-checkbox :label="2">累计积分</el-checkbox>
      <el-checkbox :label="3">当期余额</el-checkbox>
      <el-checkbox :label="4">累计余额</el-checkbox>
    </el-checkbox-group>
    <span slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSumbit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    val: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      checkListA: [],
      checkListB: []
    };
  },
  watch: {
    val(v) {
      if (JSON.stringify(v) !== "{}") {
        this.checkListA = v.listA;
        this.checkListB = v.listB;
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit("outDialog", "showField", false);
    },
    handleSumbit() {
      this.$emit("outDialog", "showField", false, {
        listA: this.checkListA,
        listB: this.checkListB
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.sfBox {
  div {
    width: 100%;
    height: 40px;
  }
}
</style>
